<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="../../../doc/css/core.css" media="all" />
        <link rel="stylesheet" type="text/css" href="tip.css" media="all" />
        <style>
            .demo-drag {
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                top: 0;
                left: 0;
            }
            
            .proxy {
                background: #F37066;
                height: 22px;
                width: 100px;
                text-indent: 10px;
                color: #fff;
            }
            
            .test {
                position: absolute;
                top: 10px;
                right: 10px;
                width: 100px;
                height: 100px;
                border: 1px solid #ccc;
            }
            
            .test2 {
                
                width: 100px;
                height: 100px;
                border: 1px solid red;
				margin:200px;
            }
            
            div.container {
                width: 1000px;
                position: relative;
            }
            
            .container table {
                table-layout: fixed;
                width: 100%;
            }
            
            .container td {
                width: 100px;
                height: 100px;
                border: 1px solid #ddd;
                font-size: 16px;
                text-align: center;
                font-weight: bolder;
            }
            
            .test3 {
                width: 800px;
                height: 300px;
                background: #ccc;
            }
            
            .testsdfsdf {
                padding: 20px;
                width: 300px;
            }
            
            .simple-tip {
                position: absolute;
                border: 1px solid #ccc;
                border-radius: 5px;
                box-shadow: 0 0 3px rgba(200, 200, 200, 0.3);
                min-width: 150px;
                min-height: 30px;
                background: #ededed url(tip_repeat.png) repeat-x;
            }
            
            .simple-tip-content {
                padding: 10px;
            }
            
            .simple-tip-flag {
                width: 17px;
                height: 10px;
                position: absolute;
                bottom: -10px;
                left:80%;
				margin-left:-8px;
                background: url(tip_flag.png) repeat-x;
            }
            
            .simple-tip-top {
                bottom: auto;
                top: -10px;
                background: url(flag_top.png) repeat-x;
            }
			.flickr-thumbs{
				overflow:hidden;
			}
			.flickr-thumbs a{
				float:left;
				margin:0 5px;
			}
			.flickr-thumbs img{
				display:block;
				height:60px;
				width:60px;
			}
        </style>
    </head>
    <body>
        <div class="container">
            <div id="test" class="demo-drag">
                I can be drag
            </div>
        </div>
        <div class="testsdfsdf">
            I can be drag
        </div>
        <div class="test2" title="tip test" tags="AKB">
            sdfsdfsdfsdf
        </div>
		<div class="test2" title="sdft" tags="andy">
            sdfsdfsdfsdf
        </div>
        <div class="test" title="tip test3 sdfsdfsdfsdf">
            sdfsdfsdfsdf
        </div>
        <script type="text/javascript" src="../../jquery.js">
        </script>
        <script type="text/javascript" src="../SimpleCore.js">
        </script>
        <script type="text/javascript" src="../SimpleDrag/SimpleDrag.js">
        </script>
        <script type="text/javascript" src="SimpleTip.js">
        </script>
        <script type="text/javascript">
            $(".test").tip();
            //$(".test").tip();
            var cache = {};
            $(".test2").each(function(){
				var tagsComma=$(this).attr("tags");
				var d=$(this).tip({
                source: function(callback){
                    if (cache[d.data("widget_tip").id]) {
                        callback(cache[d.data("widget_tip").id])
                    }
                    else {
                        callback("加载中...");
                        $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tagsComma + '&tagmode=all&format=json&jsoncallback=?',
                            function(data) {
                                var container = $('<div/>').addClass('flickr-thumbs');
                                $.each(data.items, function(i, item) {
                                    $('<a/>')
                                        .attr('href', item.link)
                                        .append($('<img/>').attr('src', item.media.m))
                                        .appendTo(container)
                                    if (i == 2)
                                        return false;
                                });
								cache[d.data("widget_tip").id]=container;
                                callback(container);
                            }
                        );
                    }
                },
				position:["top","left"],
				offset:[-20,-10]
            });
			})
			$.loadTip("正在向服务器发送请求....")
			$.alertTip("正在向服务器发送请求....",5000)
			$.successTip("你在干吗....",5000)
        </script>
    </body>
</html>
